<template>
    <div>
        <!-- 面包屑 -->
        <el-bread></el-bread>
        <!-- 添加按钮 -->
        <el-button @click="add" class="btnInfo" type="primary" size="small" plain>添加</el-button>
        <!-- 列表展示 -->
        <list @edit="edit"></list>
        <!-- 弹框展示 -->
        <Dialog ref='diaInfo' @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></Dialog>
    </div>
</template>

<script>
//引入封装好的列表
import list from "./list.vue";
//引入封装好的弹框
import Dialog from "./dialog.vue";
export default {
    data() {
        return {
            isShow: false,
            isAdd: true, //它的作用是用于区分是否为添加或者编辑
        };
    },
    components: {
        list,
        Dialog,
    },
    methods: {
        //封装一个点击添加出现弹框事件
        add() {
            //点击 打开弹框
            this.isShow = true;
            //告诉弹框你是一个添加
            this.isAdd = true;
        },
        //封装父组件关闭方法
        cancel(e) {
            this.isShow = e;
        },
        //封装一个打开编辑弹框事件
        edit(e) {
            //点击 打开弹框
            this.isShow = true;
            //告诉弹框你是一个编辑
            this.isAdd = false;
            this.$refs.diaInfo.lookup(e)
        },
    },
};
</script>

<style scoped>
.btnInfo {
    margin: 20px 10px;
}
</style>
